<template>
	<view class="item-desc u-f">
		<view class="desc-lt u-f-ac">
			<image :src="itemInfo.image.url" mode="widthFix" />
			<view class="topic">
				<view class="topic-name">{{itemInfo.title | stringSub}}</view>
				<view class="topic-man">题主：{{itemInfo.user.nickname | stringSub}}</view>
			</view>
		</view>
		<view @tap="opendetail(itemInfo['topic_id'])" class="desc-rt u-f1">
			<text class="icon iconfont iconzuopin"></text>
			{{itemInfo.work_num || itemInfo.statistic.work}}
			<text class="icon iconfont icongengduo go-right"></text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			itemInfo: {
				tyep: Object,
				default: {
					title: '',
					user: {
						nickname: ''
					}
				}
			}

		},
		data() {
			return {

			};
		},
		beforeMount(){
			if(!this.itemInfo.user){
				this.itemInfo = {
					title: '',
					user: {
						nickname: ''
					}
				}
			}
		},
		 filters: {
		    stringSub(val) {
				if(!val){
					return;
				}
				if(val.length < 10){
					return val
				}
		      return val.substring(0,10) + '...'
		    }
		  },
		methods: {
			opendetail(topic_id) {
				this.$emit('opendetail', topic_id)
			}
		}
	}
</script>

<style lang="scss">
	.item-desc {
		background-color: #fff;

		.desc-lt {
			>image {
				width: 98upx;
				height: 98upx;
				margin-right: 10upx;
			}

			.topic-name {
				font-weight: 400;
				color: rgba(26, 27, 30, 1);
				line-height: 45upx;
				font-size: 32upx;
			}

			.topic-man {
				font-size: 28upx;
				font-weight: 400;
				color: rgba(140, 140, 140, 1);
				line-height: 40upx;
			}
		}

		.desc-rt {
			text-align: right;
			font-size: 26upx;
			font-weight: 400;
			color: rgba(140, 140, 140, 1);

			>.iconzuopin {
				margin-right: 6upx;
				vertical-align: -.1ex;
			}

			.go-right {
				margin-left: 10upx;
				vertical-align: -.1ex;
			}
		}
	}
</style>
